<template>
    <div class="wait">
        <div class="customer" v-for="item in list" :key="item.id" @click="letCustomerSit(item.id)">
             <Badge class="blue" :id="item.id"></Badge>
             <div class="info blue">
                <div class="progress" v-bind:style="{width: ((curTime - item.arrive_time)/maxWaitLen)*100 >= 100 ? 100:((curTime - item.arrive_time)/maxWaitLen)*100 + '%'  }"></div>
                <p>等待</p>
            </div>
        </div>
    </div>
</template>

<script>
import Badge from './Badge.vue'

export default {
  components: { Badge },
  name: 'Wait',
  props:{
      list:Array,
      curTime:Number,
      maxWaitLen:Number
  },
  methods:{
      letCustomerSit(id){
          this.$emit('let-customer-sit',id)
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .wait{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        padding: 24px;
    }

    .customer{
        position: relative;
        width: 32%;
        margin-bottom: 40px;
    }

    .info{
        position: absolute;
        bottom: -40px;
        width: 100%;
        line-height: 1.5;
        text-align: center;
        border: 8px solid #fff;
        font-size: 22px;
        font-weight: 800;
        color: #fff;
    }

    .info>p{
        position: relative;
        z-index: 2;
    }

    .progress{
        position: absolute;
        top: 0;
        bottom: 0;
        background-color: #006dd9;
    }

    .blue{
        background-color: #2693ff;
    }


</style>
